<template>
  <div class="row-right">
    <div class="row">
      <div class="col-sm-4 col-xs-6">
        <router-link to="/my/myVideo">
          <img src="../assets/images/icon_add.png" alt="" width="100%">
        </router-link>
      </div>
    </div>
    <div class="row section-header" style="margin:50px 0px 30px;">
      <ul class="nav nav-pills">
        <li role="presentation" style="margin-right: 40px">
          <h4>
            <a href="javascript:;" :class="{'text-black':curType!=1,'text-primary':curType==1}" @click="curType=1">购买的课程</a>
          </h4>
        </li>
        <li role="presentation" style="margin-right: 40px">
          <h4>
            <a href="javascript:;" :class="{'text-black':curType!=2,'text-primary':curType==2}" @click="curType=2">出售的课程</a>
          </h4>
        </li>
        <li role="presentation">
          <h4>
            <a href="javascript:;" :class="{'text-black':curType!=3,'text-primary':curType==3}" @click="curType=3">发布的课程</a>
          </h4>
        </li>
      </ul>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-4" v-for="item in curriculumList" :key="item.id">
        <Course-item :item="item" :next-page="nextPage"></Course-item>
      </div>
    </div>
    <div class="row text-center load-more" v-if="loadShow">
      <a href="javascript:;">加载更多</a>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import util from "@/assets/js/utils.js";
import CourseItem from '@/components/Course-Item.vue'
export default {
  name: "course",
  data () {
    return {
      curType: 1,
      curriculumList: [],
      loadShow: true,
      pageNum: 0,
      nextPage: ''
    };
  },
  components: {
    CourseItem
  },
  created () {
    this.fetchHistoryList();
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  watch: {
    curType (newVal) {
      this.handleInitPage();
      if (newVal == 3) {
        this.nextPage = 'myVideo'
        this.fetchCurriculumList();
      }
      else {
        this.nextPage = 'myVideo'
        this.fetchHistoryList();
      }

    }
  },
  methods: {
    handleInitPage () {
      this.curriculumList = [];
      this.loadShow = true;
      this.pageNum = 0;
    },
    fetchHistoryList () {
      let that = this;
      axios
        .post(
          "/my/buyHistory",
          qs.stringify({
            type: that.curType == 1 ? "form" : "to", // (购买传form  出售的传to 默认to)
            from: that.pageNum
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false;
            that.curriculumList = that.curriculumList.concat(response.data.data);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchCurriculumList () {
      let that = this;
      axios
        .post(
          "/curriculum/list",
          qs.stringify({
            userId: this.userInfo.uid,
            ctype: '',
            category: '',
            hot: '',
            name: '',
            from: ''
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false;
            that.curriculumList = that.curriculumList.concat(response.data.data);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchTechList () {
      //推荐专家
      let that = this;
      axios
        .post(
          "/my/techListByClassify",
          qs.stringify({
            id: "",
            hot: 0,
            name: "",
            from: 0
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            that.techList = response.data.data.slice(0, 4);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchMoreData () {
      // 加载更多
      this.pageNum += 1;
      this.fetchHistoryList();
    }
  }
};
</script>